/* color palette from <https://github.com/vuejs/theme> */
:root {
  /* 字体大小 */
  --gx-font-size-14: 14px;
  --gx-font-size-15: 15px;
  --gx-font-size-16: 16px;
  --gx-font-size-17: 17px;
  --gx-font-size-18: 18px;
  --gx-font-size-19: 19px;
  --gx-font-size-20: 20px;
  --gx-font-size-21: 21px;
  --gx-font-size-22: 22px;
  --gx-font-size-23: 23px;
  --gx-font-size-24: 24px;
  --gx-font-size-25: 25px;
  --gx-font-size-26: 26px;
  --gx-font-size-27: 27px;
  --gx-font-size-28: 28px;
  --gx-font-size-29: 29px;
  --gx-font-size-30: 30px;
  --gx-font-size-31: 31px;
  --gx-font-size-32: 32px;
  --gx-font-size-33: 33px;
  --gx-font-size-34: 34px;
  --gx-font-size-50: 50px;
  /* 字体粗细 */
  --gx-font-weight-500: 500;
  --gx-font-weight-550: 550;
  --gx-font-weight-600: 600;
  --gx-font-weight-650: 650;
  /* 圆角 */
  --gx-border-radius-5: 5px;
  --gx-border-radius-10: 10px;
  --gx-border-radius-15: 15px;
  --gx-border-radius-20: 20px;
  /* padding */
  --gx-padding-0: 0px;
  --gx-padding-5: 5px;
  --gx-padding-8: 8px;
  --gx-padding-10: 10px;
  --gx-padding-15: 15px;
  --gx-padding-20: 20px;
  /* margin */
  --gx-margin-0: 0px;
  --gx-margin-5: 5px;
  --gx-margin-8: 8px;
  --gx-margin-10: 10px;
  --gx-margin-15: 15px;
  --gx-margin-20: 20px;
  /* 自适应高度 */
  --height-100: calc(100%);
}

body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

/* 文本居左 */
.text-left {
  text-align: left;
}
/* 文本居中 */
.text-center {
  text-align: center;
}
/* 文本居右 */
.text-right {
  text-align: right;
}
/* 高度100% */
.qc-height-100 {
  height: calc(100%);
}
/* 横向flex */
.qc-flex-x {
  display: flex;
}
/* 纵向flex */
.qc-flex-y {
  display: flex;
  flex-direction: column;
}
/* flex横向居中 */
.qc-flex-jusify-center {
  justify-content: center;
}
/* flex纵向居中 */
.qc-flex-align-center {
  align-items: center;
}
/* flex横向居右 */
.qc-flex-justify-right {
  justify-content: flex-end;
}
/* flex纵向居底 */
.qc-flex-align-end {
  align-items: flex-end;
}
/* flex横向两端对齐 */
.qc-flex-justify-between {
  justify-content: space-between;
}
/* flex填满 */
.qc-flex-1-x {
  flex: 1;
  width: 0;
}
/* flex填满 */
.qc-flex-1-y {
  flex: 1;
  height: 0;
}
/* flex间距 */
.qc-flex-gap-5 {
  gap: 5px;
}
.qc-flex-gap-10 {
  gap: 10px;
}
.qc-flex-gap-15 {
  gap: 15px;
}
.qc-flex-gap-20 {
  gap: 20px;
}
.qc-flex-gap-25 {
  gap: 25px;
}
.qc-flex-gap-30 {
  gap: 30px;
}
